<template>
  <div class="comments">
    <div class="comments__title">评论（{{total || '无'}}）</div>
    <div v-loading="loading">
      <div class="comments__body" v-if="data && data.length">
        <div class="comments__item" v-for="item of data" :key="item.id">
          <Comments-item :data="item" :creator="creator"/>
        </div>
      </div>
      <No-content v-else/>
    </div>
  </div>
</template>

<script>
import CommentsItem from './Comments-item'
import NoContent from '@/components/NoContent'

export default {
  name: 'comments',
  props: {
    data: Array,
    loading: Boolean,
    total: Number,
    creator: Object
  },
  components: {
    CommentsItem,
    NoContent
  }
}
</script>

<style>
.comments__body {
  margin-top: 18px;
}
.comments__title {
  font-size: 18px;
  font-weight: bold;
}

.comments__item {
  margin-top: 8px;
}
</style>
